<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数据分析 -樱桃检测预警平台</title>
    <link rel="stylesheet" href="../static/css/elementui.css">
    <!-- 引入图标-->
    <link rel="shortcut icon" href="../static/img/favicon.ico" type="image/x-icon">
</head>

<body>
<div id="app">
    <!--header-->
    <el-header style="height: 20%">
        <!--导航栏-->
        <el-row>
            <el-col :span="2" >
                <img src="../static/img/first.jpg" style="width: 100px;margin-top: 4%">
            </el-col>
            <el-col hidden-sm-and-down :span="4">
                <img src="../static/img/word.jpg" style="width: 300px;margin-top: 7%">
            </el-col>
            <el-col :span="15">
                <el-menu default-active="6"
                         class="el-menu-demo headmenu"
                         mode="horizontal"
                         active-text-color="#85130f"
                         index="10">
                    <el-menu-item index="1" style="margin-top: 7%;color: #85130f" ><a href="index.html">首页</a></el-menu-item>
                    <el-menu-item index="2" style="margin-top: 7%;color: #85130f"><a href="datareport.html">数据报表</a></el-menu-item>
                    <el-menu-item index="3" style="margin-top: 7%;color: #85130f"><a href="monitoring.html">实时监控</a></el-menu-item>
                    <el-menu-item index="5" style="margin-top: 7%;color: #85130f"><a href="warning.html">预警分析</a></el-menu-item>
                    <el-menu-item index="6" style="margin-top: 7%;color: #85130f"><a href="datasearch.html">数据分析</a></el-menu-item>
                    <el-menu-item index="7" style="margin-top: 7%;color: #85130f"><a href="callus.html">联系我们</a></el-menu-item>

                </el-menu>

            </el-col>
        </el-row>

    </el-header>
    <!--main-->
    <el-main>
        <el-row>
            <el-col :span="7">
                <!--输入框-->
                <div style="margin-top: 5px;margin-left:3%;width: 100%;text-align: center;align-content: center">
                    <div class="demonstration" style="color: #82848a">请输入想分析的数据ID</div>
                    <!--请输入想要分析的数据ID:-->
                    <el-input :placeholder="nowWarnData.id" v-model="nowWarnData.id" style="width: 50%">
                        <el-button slot="append" icon="el-icon-search" v-on:click="searchWarnDataById1(nowWarnData.id)" type="button"></el-button>
                    </el-input>
                </div>
                <!--图表-->
                <div id="mycharts2" style="width:500px;height:350px"></div>
            </el-col>
            <!--存放害虫数据-->
            <el-col :span="7">
                <h2 style="color: darkred">{{nowPest.name}}</h2>
                <h4 class="fourTitle">简介</h4>
                <p>{{nowPest.brief}}</p>
                <h4 class="fourTitle">发生规律</h4>
                <p>{{nowPest.appearlaw}}</p>
                <h4 class="fourTitle">描述</h4>
                <p>{{nowPest.describe}}</p>
                <h4 class="fourTitle">天敌</h4>
                <p>{{nowPest.enemy}}</p>
                <h4 class="fourTitle">生活习性</h4>
                <p>{{nowPest.describe}}</p>
                <h4 class="fourTitle">危害特点</h4>
                <p>{{nowPest.damage}}</p>
                <h4 class="fourTitle">防治手段</h4>
                <p>{{nowPest.solve}}</p>
            </el-col>
            <!--存放农药数据-->
            <el-col :span="7" style="margin-left: 3%">
                <!--显示可以选择的农药-->
                <div>
                    <h4 style="color: #6f7180">可选择的农药有：</h4>
                    <el-radio-group v-model="radio">
                        <el-radio-button  type="button" v-for="p in nowPest.pesticides" :label="p.name" :key="p.id" @click.native="changePesticides(p.id)">{{p.name}}</el-radio-button>
                    </el-radio-group>
                </div>
                <!--某一农药的具体信息-->
                <div>
                    <h2 style="color: darkred">{{nowPesticides.name}}</h2>
                    <h4 class="fourTitle">简介</h4>
                    <p>{{nowPesticides.brief}}</p>
                    <h4 class="fourTitle">使用方法</h4>
                    <p>{{nowPesticides.method}}</p>
                    <h4 class="fourTitle">适用场景 效果</h4>
                    <p>{{nowPesticides.suiteffect}}</p>
                    <h4 class="fourTitle">副作用 危害</h4>
                    <p>{{nowPesticides.byeffect}}</p>
                    <h4 class="fourTitle">注意事项</h4>
                    <p>{{nowPesticides.warning}}</p>
                    <h4 class="fourTitle">兑水比例</h4>
                    <p>{{nowPesticides.water_ratio}}</p>
                </div>
            </el-col>
        </el-row>
    </el-main>

    <!--footer-->
    <el-footer style="height:180px">
        <el-row>
            <!--存放文字说明-->
            <el-col style="color: #85130f;text-align: center">
                <h3>萤检|樱桃害虫预警平台</h3>
                <div>联系电话:13333333333</div>
                emial:<span style="color: #3a8ee6">123@163.com</span>
                <div>地址:广东省广州市海珠区滨江街道仲恺路</div>
                <div>版权所有:萤检有限公司</div>
            </el-col>
        </el-row>
    </el-footer>

</div>
</body>

<!-- 引入vue和elementUI所需配置文件 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../static/js/vuejs-2.5.16.js"></script>
<script src="../static/js/elementui.js"></script>
<script src="../static/js/axios.js"></script>

<!-- 引入index.js文件
<script type="text/javascript" src="../static/js/index.js"></script>-->
<!-- 引入index.css文件 -->
<style>
    @import "../static/css/index.css";
</style>
<!-- 工具文件 -->
<script type="text/javascript" src="../static/js/jumpPage.js"></script>
<script src="../static/js/dateOperation.js"></script>
<!--引入js文件-->
<script src="../static/js/index.js"></script>

<script>
    getxData(); //获取图表横坐标。注意：需要在echarts的js文件加入前修改值，否则横坐标不生效。
</script>

<!--引入echarts-->
<script src="../static/js/echarts.common.min.js"></script>

<script>
    let i=QueryString.Init();
    //console.log("i=="+i);
    if (i==-1){
        loadDataEcharts();
    }else{
        let id=QueryString.GetValue("id");
        searchWarnDataById1(id);    //获取数据
    }
</script>

</html>
